<template>
	<div class="imgdiv" ref="imgdiv" :style="'width:'+width+'px;height:'+height+'px;'" :class="{'diableDiv':disabled}">
		<el-upload
		  action="#"
		  list-type="picture-card"
		  :file-list="fileList"
		  :limit="limit"
		  :auto-upload="false" ref="img" 
		  :style="'width:'+width+'px;height:'+height+'px;'"
		  :on-change="handleChange"		 
		  :before-upload="beforeAvatarUpload">
		    <i slot="default" class="el-icon-plus"></i>
		    <div slot="file" slot-scope="{file}">
		      <img
		        class="el-upload-list__item-thumbnail"
		        :src="file.url" alt=""
		      >
		      <span class="el-upload-list__item-actions">
		        <span
		          class="el-upload-list__item-preview"
		          @click="handlePictureCardPreview(file)"
		        >
		          <i class="el-icon-zoom-in"></i>
		        </span>
		        <span
		          v-if="!disabled"
		          class="el-upload-list__item-delete"
		          @click="handleDownload(file)"
		        >
		          <i class="el-icon-download"></i>
		        </span>
		        <span
		          v-if="!disabled"
		          class="el-upload-list__item-delete"
		          @click="handleRemove(file)"
		        >
		          <i class="el-icon-delete"></i>
		        </span>
		      </span>
		    </div>
		</el-upload>
		<winImg v-if="showImg" :src="dialogImageUrl" @close="showImg=false"></winImg>
	</div>
</template>

<script>
	import winImg from '@/system/components/winImg.vue'
	import { uploadImage ,execApi,fpglreadPic} from "@/system/api/cellView.js";
	export default {
	name: "imgUpload",
	components:{
		winImg
	},
	props:{
		recognition:{default:false},//识别
        plimit:{default:9999},//数量
        pfileList:{default:null},
        height:{default:100},
        width:{default:0},
        disabled:{default:false}
	},
    data() {
      return {
        dialogImageUrl: '',
        fileList: [],       
        showImg: false,
        limit:9999,
        // uploadFiles
      };
    },
    mounted(){  
    	if(this.plimit){
    		this.limit = parseInt(this.plimit); 
    	}
    	if(this.pfileList){//把字段内容转换成 图片的url    		
    		let arr = this.pfileList.split(",");
    		for(let i=0;i<arr.length;i++){
    			let obj = {url:this.api+arr[i],delUrl:arr[i]};					
      			this.fileList.push(obj);     
    		}
    	}
    	if(this.limit <= this.$refs.img.fileList.length || this.disabled){
			this.$refs.imgdiv.style.setProperty('--display', 'none');     
		}
    	this.setSize();    	
    },
    methods: {
      emitimages(){
      	let fl = null;
      	for(let i=0;i<this.fileList.length;i++){
      		if(fl==null){
      			fl = this.fileList[i].delUrl;
      		}else{
      			fl = fl+','+this.fileList[i].delUrl;
      		}
      	}
      	
      	this.$emit('fileList',fl);
      },
      handleRemove(file) {//删除 图片        
        let  turl = file.delUrl.replace('download','deleteFile');        
        execApi(turl,{}).then((res)=>{ 
        	if(res.success){        		
        		for(let i=0;i<this.fileList.length;i++){
        			let f = this.fileList[i];
        			if(f.delUrl == file.delUrl){        				
        				this.fileList.splice(i,1);           				
        				if(this.limit > this.$refs.img.fileList.length ){
		      				this.$refs.imgdiv.style.setProperty('--display', 'inline-block');     
		      			}
        				this.emitimages();
        			}
        		}
        	}else{
        		
        	}
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.showImg = true;
      },
      handleDownload(file) {              
        window.location.href = this.api+ file.delUrl;         
      },
      handleChange(file, fileList){
      	console.log(file.raw.type);
      	if(file.raw.type == 'image/png'||
      		file.raw.type == 'image/jpeg'||
      		file.raw.type == 'image/bmp' ||
      		file.raw.type == 'image/gif'){
      			if(this.recognition){
      				this.fpglreadPic(file.raw); 
      			}else{
      				this.uploadImage(file.raw); 
      			}
      			
      		}else{ 
      			let index = this.$refs.img.uploadFiles.length-1;      			
      			this.$refs.img.uploadFiles.splice(index,1);      			
      			this.message('只能上传图片！',3);
      		}
      	
      },      
      beforeAvatarUpload(file){        	
      	let res = true;      	
      	console.log(file.type);
      	return res;
      },
      setSize(){
      	//.el-upload-list--picture-card .el-upload-list__item  .el-upload--picture-card      	
      	this.$refs.imgdiv.style.setProperty('--imgheight', (this.height - 6) +'px');      	
      },
      uploadImage(file){
      	let formData = new FormData();
      	console.log(file);
      	formData.append("imagedata", file);
      	uploadImage(formData).then((res) => {
      		if(res.success){
      			let obj = {url:this.api+res.info,delUrl:res.info};					
      			this.fileList.push(obj);        			
      			if(this.limit <= this.$refs.img.fileList.length){
      				this.$refs.imgdiv.style.setProperty('--display', 'none');     
      			}
      			this.emitimages();
      		}else{      			
      			let index = this.$refs.img.uploadFiles.length-1;      			
      			this.$refs.img.uploadFiles.splice(index,1); 
      			this.message(res.msg,3);
      		}
      	});      	
      },
      fpglreadPic(file){
      	let formData = new FormData();
      	formData.append("file", file);
      	fpglreadPic(formData).then((res) => {      		
      		if(res.success){      			
      			let obj = {url:this.api+res.info.picPath,delUrl:res.info.picPath};					
      			this.fileList.push(obj);
      			
      			if(this.limit <= this.$refs.img.fileList.length){
      				this.$refs.imgdiv.style.setProperty('--display', 'none');     
      			}
      			this.$emit('settable',res.info.table)
      			setTimeout(()=>{
      				this.emitimages();
      			}, 200);
      			
      			
      		}else{      			
      			let index = this.$refs.img.uploadFiles.length-1;      			
      			this.$refs.img.uploadFiles.splice(index,1); 
      			this.message(res.msg,3);
      		}
      	});
      },
    }
  }
</script>

<style scoped>	
	.imgdiv{
		--imgheight:0px;	
		--display: inline-block;	
		overflow-x: auto;
		overflow-y: hidden;		
	}
	>>>.el-upload-list--picture-card .el-upload-list__item{
		width: var(--imgheight);
    	height: var(--imgheight);
    	margin-top: 3px
	}
	>>>.el-upload--picture-card{
		margin-top: 3px;
		width: var(--imgheight);
    	height: var(--imgheight);
    	line-height: var(--imgheight);
    	display: var(--display);
    	background: inherit;
	}
	>>>.el-upload-dragger{
		width: var(--imgheight);
    	height: var(--imgheight);
	}
</style>